<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象</title>
</head>
<body>
    <h1>对象</h1>

    <script>
        // 属性简写
        // bad
        const name = '张三';
        const age = 20;
        const user1 = {
            name: name,
            age: age
        };

        // good
        const user2 = {
            name,
            age
        };

        // 方法简写
        // bad
        const obj1 = {
            sayHi: function() {
                console.log('Hi!');
            }
        };

        // good
        const obj2 = {
            sayHi() {
                console.log('Hi!');
            }
        };

        // 属性名使用引号
        // bad
        const obj3 = {
            'foo': 3,
            'bar': 4,
            'data-blah': 5
        };

        // good
        const obj4 = {
            foo: 3,
            bar: 4,
            'data-blah': 5
        };

        // 实际应用示例
        // 配置对象
        const config = {
            host: 'localhost',
            port: 3000,
            async connect() {
                await this.init();
                console.log(`Connected to ${this.host}:${this.port}`);
            },
            async init() {
                // 初始化逻辑
            }
        };

        // API响应处理
        const response = {
            code: 200,
            data: {
                users: [],
                total: 0
            },
            getMessage() {
                return this.code === 200 ? 'success' : 'error';
            },
            isSuccess() {
                return this.code === 200;
            }
        };

        // 组件配置
        const componentConfig = {
            name: 'MyComponent',
            props: ['title', 'content'],
            data() {
                return {
                    count: 0
                };
            },
            methods: {
                increment() {
                    this.count++;
                }
            }
        };
    </script>
</body>
</html> 